<template>
  <div>
    <van-nav-bar  class="header" :border="false" :safe-area-inset-top="true">
      <template #left>
        <van-row gutter="5">
          <van-col span="20">
<!--            -->
            <span style="font-weight: bold;  display: block;   width: 10rem; font-size: 14px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ locationAddress }}</span>
          </van-col>
          <van-col span="4">
<!--            <icon-svg icon-class="my-icon-shouhuodizhi"></icon-svg>-->
            <van-icon  size= "18" style="line-height: 22px;" color="white" name="location" />
          </van-col>
        </van-row>
      </template>
      <template #right>
        <van-row gutter="5">
          <van-col span="4">
<!--            <van-icon size="18" style="line-height: 22px;" color="white" name="more" />-->
          </van-col>
        </van-row>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import {getLocation} from "../utils/location";
import { mapState, mapActions } from "vuex";

export default {
  name: "Header",
  data(){
    return{
      loc:'',
      address:'正在定位'
    }
  },
  methods:{

  },
  computed:{
    ...mapState({
      Amap: (state) => state.Amap.all
    }),
    locationAddress(){
      // console.log(Amap.msg);
      this.address =this.Amap.formattedAddress ;
      return this.address;
      // return this.address;
    },
  },
  mounted() {
  }
}
</script>

<style scoped>
.header{
  background-color: #f52443;
  color: white;
}

</style>
